<template>
    <div>
       <van-nav-bar 
       title="健康食品"
        class='van'
        @click-left="onClickLeft"
        @click-right="onClickRight"
        >
            <van-icon name="arrow-left" slot="left" color='black' size='20px'/>
            <van-icon name="cart" slot="right" color='black' size='28px' class='van'/>
        </van-nav-bar>
         <van-icon name="balance-list" slot="right" color='black' size='28px' class='van1' @click='tap'/>
        <ul class='list1'>
            <li v-for='item in list'>
                <van-row>
                <van-col span="8" offset="1">
                     <van-image
                        width="170"
                        height="170"
                        :src="item.pimg"
                        class='img'
                    />
                </van-col>
                </van-row>
                <van-row>
                <van-col span="24" offset="1">
                   <span>{{item.pname}}</span>
                </van-col>
                </van-row>
                <van-row>
                <van-col span="24" offset="1">
                   <span>￥{{item.pprice}}</span>
                </van-col>
                </van-row>
            </li> 
        </ul>
    </div>
</template>

<script>
  import axios from 'axios'

  export default {
    name:'Sw',
    data () {
        return {
           list:[] 
        }
    },
    methods: {
        onClickLeft(){
            this.$router.go(-1)
        },
        onClickRight(){
            this.$router.push('/cart')
        },
        tap(){
            this.$router.push('/allorder')
        }
    },
    mounted () {
        var _this=this
        axios({
            method:'get',
            url:'http://jx.xuzhixiang.top/ap/api/productlist.php',
            params:{uid:11003}
        }).then((res)=>{
            console.log(res.data.data)
            _this.list=res.data.data
        })
    }
}
</script>

<style scoped>
.van{
    margin-left:15px;
}
.van1{
    position: fixed;
    left:291px;
    top:11px;
    z-index: 20;
}
.list1{
    width:370px;
    height:450px;
    margin-left:2px;
}
.list1 li{
    float: left;
    margin-right: 15px;
}
</style>
